<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col>
        <el-card class="mb10">
          <template #header>
            <span>订单信息</span>
          </template>
          <el-row class="info_cont">
            <el-col :sm="8" :xs="24">
              <label>订单号：</label>
              <span>{{ info.orderNo }}</span>
            </el-col>
            <el-col :sm="8" :xs="24" class="flex_cont">
              <label>订单状态：</label>
              <dict-tag :options="pay_status" :value="info.payStatus" />
            </el-col>
            <el-col :sm="8" :xs="24">
              <label>订单金额：</label>
              <span>￥{{ info.totalAmount / 100 || 0 }}</span>
            </el-col>
            <el-col :sm="8" :xs="24">
              <label>实付金额：</label>
              <span>￥{{ info.payerTotal / 100 || 0 }}</span>
            </el-col>
            <el-col :sm="8" :xs="24">
              <label>支付积分：</label>
              <span>{{ info.payerCoins || 0 }}</span>
            </el-col>
            <el-col :sm="8" :xs="24">
              <label>退款金额：</label>
              <span>￥{{ info.refundTotal / 100 || 0 }}</span>
            </el-col>
            <el-col :sm="8" :xs="24" class="flex_cont">
              <label>支付渠道：</label>
              <dict-tag v-if="info.payChannel != null" :options="pay_channel" :value="info.payChannel" />
              <span v-else>-</span>
            </el-col>
            <el-col :sm="8" :xs="24" class="flex_cont">
              <label>充电状态：</label>
              <dict-tag :options="charge_status" :value="info.chargeStatus" />
            </el-col>
            <el-col :sm="8" :xs="24">
              <label>开始充电时间：</label>
              <span v-if="info.beginTime != null">{{ info.beginTime }}</span>
              <span v-else>-</span>
            </el-col>
            <el-col :sm="8" :xs="24">
              <label>结束充电时间：</label>
              <span v-if="info.finishTime != null">{{ info.finishTime }}</span>
              <span v-else>-</span>
            </el-col>
            <el-col :sm="24" :xs="24">
              <label>结束原因：</label>
              <span v-for="(item, key) in reason_option" :key="key">
                <span v-if="info.reason == item.value">
                  {{ item.label }}
                </span>
              </span>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col>
        <el-card class="mb10">
          <template #header>
            <span>充电设备</span>
          </template>
          <el-row class="info_cont">
            <el-col :sm="8" :xs="24">
              <label>电站名称：</label>
              <span>{{ info.stationName }}</span>
            </el-col>
            <el-col :sm="8" :xs="24">
              <label>设备名称：</label>
              <span>{{ info.devName }}</span>
            </el-col>
            <el-col :sm="8" :xs="24">
              <label>充电通道：</label>
              <span>第{{ info.road }}路</span>
            </el-col>
            <el-col :sm="8" :xs="24" class="flex_cont">
              <label>充电模式：</label>
              <dict-tag :options="charge_mode" :value="info.chargeMode" />
            </el-col>
            <el-col :sm="8" :xs="24" class="flex_cont">
              <label>充电类型：</label>
              <dict-tag :options="charge_type" :value="info.chargeType" />
            </el-col>
            <el-col :sm="8" :xs="24">
              <label>实际消费：</label>
              <span>￥{{ info.chargeCost / 100 || 0 }}</span>
            </el-col>
            <el-col :sm="8" :xs="24" v-if="info.chargeMode == 'TIME'">
              <label>充电时长：</label>
              <span>{{ (info.duration / 60).toFixed(1) }}分钟</span>
            </el-col>
            <el-col :sm="8" :xs="24">
              <label>实际充电时长：</label>
              <span>{{ (info.realDuration / 60).toFixed(1) }}分钟</span>
            </el-col>
            <el-col :sm="8" :xs="24" v-if="info.chargeMode == 'ELEC'">
              <label>应充度数：</label>
              <span>{{ (info.electricity / 3600000).toFixed(1) }}度</span>
            </el-col>
            <el-col :sm="8" :xs="24">
              <label>实际充电度数：</label>
              <span>{{ (info.realElectricity / 3600000).toFixed(1) }}度</span>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script setup name="ChargeDetail">
import { getChargeOrder } from "@/api/trade/charge";

const route = useRoute();
const router = useRouter();
const { proxy } = getCurrentInstance();

const { charge_mode, charge_type, charge_status, pay_status, pay_channel } = proxy.useDict("charge_mode", "charge_type", "charge_status", "pay_status", "pay_channel");

const info = ref({});
const queryParams = ref({
  orderId: null,
})

const reason_option = ref([
  {
    value: 0,
    label: "其他",
  },
  {
    value: 1,
    label: "充满断电",
  },
  {
    value: 2,
    label: "充电结束",
  },
  {
    value: 3,
    label: "未插插头",
  },
  {
    value: 4,
    label: "手动结束",
  },
  {
    value: 5,
    label: "功率过大结束",
  },
  {
    value: 6,
    label: "漏电结束",
  },
  {
    value: 7,
    label: "金额不足",
  },
  {
    value: 8,
    label: "总功率过大",
  },
  {
    value: 9,
    label: "时间到期",
  },
  {
    value: 55,
    label: "其他",
  },
])

function getInfo() {
  getChargeOrder(route.query.orderNo).then((response) => {
    info.value = response.data;
  });
}

getInfo();
</script>

<style lang="scss" scoped>
.look {
  cursor: pointer;
}

.mb10 {
  margin-bottom: 10px;
}

.mlr10 {
  margin: 0 10px;
}

.mr10 {
  margin-right: 10px;
}

.flex_cont {
  display: flex;
}

.info_cont {
  float: none;
  line-height: 36px;
  font-size: 14px;
  vertical-align: middle;
}

#chart {
  width: 100%;
  height: 400px;
}

.color_f56c6c {
  color: #f56c6c;
}
</style>
